import React, { Component } from 'react'
import './index.css'
import axios from 'axios'
import Time from '../../../until/getTime'
export default class List extends Component {
    state={
        list:[]
    }

    // 编辑列表数据（ 待发布变已发布 / 删除消息 ）
    changeMessage = (id,url) => axios.post(url,{id:id}).then( data=>this.initData(data.data,msg=>alert(msg)))
    

    // 列表数据处理
    initData = (res,callback) =>{
        const {code,data,msg} = res;
        if(code === 1){
            // 按照创建时间倒叙
            data.sort((a,b)=>b.createTime -a.createTime)
            this.setState({list:[...data]})
        }

        if(callback) callback(msg)

    }
    render() {
        const {list} = this.state
        return (
            <div className="list">
                {/* 搜索部分 */}
                <div className="search">
                    <input type="text" placeholder="请输入关键字"/>

                    <select defaultValue="全部">
                        <option value="全部">全部</option>
                        <option value="系统消息">系统消息</option>
                        <option value="活动消息">活动消息</option>
                    </select>

                    <div className="btn">搜索</div>
                </div>
                <div className="search">
                    <div className="btn" onClick={()=>this.props.setDefaultIndex(1)}>创建消息</div>
                </div>
                {/* 列表部分 */}
                <div className="list_tab">
                    {/* 表头 */}
                    <div className="tr">
                        <span>消息ID</span>
                        <span className="title">消息名称</span>
                        <span>消息类型</span>
                        <span>创建时间</span>
                        <span>发布时间</span>
                        <span>操作</span>
                    </div>
                    {/* 数据体 */}
                    {
                        list.map((item,key) =>{
                            return <div key={key} className="tr">
                                <span>{item.id}</span>
                                <span className="title">{item.title}</span>
                                <span>{item.type}</span>
                                <span>{Time.getDate(item.createTime)}</span>
                                <span>{item.sendTime===null?'-':Time.getDate(item.sendTime)}</span>
                                {
                                    item.status === 'do'?<span>
                                        <strong onClick={()=>this.changeMessage(item.id,'/list/change')}>待发布</strong>
                                        <strong onClick={()=>this.props.setDefaultIndex(1,item)}>编辑</strong>
                                        <strong onClick={()=>this.changeMessage(item.id,'/list/delete')}>删除</strong>
                                    </span>:
                                    <span>
                                        <strong>已发布</strong>
                                        <strong>查看</strong>
                                    </span>
                                }
                                
                                
                            </div>
                        })
                    }
                </div>

            </div>
        )
    }
    componentDidMount(){
        axios.get('/list').then( data=>this.initData(data.data))
    }

}
